<template>
    <div>
        <h1 style="text-align:center">{{title}}</h1>
        <el-input v-model="title" >
        </el-input>
        <h2 style="text-align:center">
            正文
        </h2>
        <editor class="editor">
        </editor>
        <div>
        <h3>标签:</h3>
        </div>
        <div>
<el-row type="flex" justify="between">
<el-col :span="24">
<!--tag展示区-->
<el-row>
<el-tag class="tagClass" v-for="(tag,index) in tags" :key="index" closable @close="handleClose(tag)" :type="tag.id" size="mini">
{{tag.yesapiOneTagsName}}
</el-tag>
<el-button v-if="tags.length>0" @click="clearAll" plain size="mini">全部删除</el-button>
</el-row>
<!--表单-->
<el-form :model="tempForm" ref="tempForms" class="choose_tag">
<p class="tag_title">选择标签</p>
<!-- 多选人员 -->
<el-checkbox-group v-model="tempForm.checkboxGroup5" size="mini">
<el-checkbox border v-for="(item,index) in checkBox" @change="perChange(item)" :label="item.id" :key="index">{{item.yesapiOneTagsName}}</el-checkbox>
</el-checkbox-group>
</el-form>
</el-col>
</el-row>
        </div>
        <el-button plain class="tijiao" @click="addtext()">
            提交
        </el-button>

    </div>
</template>

<script>
const titleConfig = {
  "ql-bold": "加粗" ,
  "ql-color": "颜色",
  "ql-font": "字体",
  "ql-code": "插入代码",
  "ql-italic": "斜体",
  "ql-link": "添加链接",
  "ql-background": "背景颜色",
  "ql-size": "字体大小",
  "ql-strike": "删除线",
  "ql-script": "上标/下标",
  "ql-underline": "下划线",
  "ql-blockquote": "引用",
  "ql-header": "标题",
  "ql-indent": "缩进",
  "ql-list": "列表",
  "ql-align": "文本对齐",
  "ql-direction": "文本方向",
  "ql-code-block": "代码块",
  "ql-formula": "公式",
  "ql-image": "图片",
  "ql-video": "视频",
  "ql-clean": "清除字体样式",
  "ql-upload": "文件"
};

import editor from '../components/Editor.vue'
	export default {
    name:"create",
        components:{
        editor
        },
  data() {
    return {
      tags: [],
tempForm: {
checkboxGroup5: [], //选择的人员
},
detailData: [],
checkBox: [],
    editorOption:{
      modules:{
        toolbar:[
          ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
          ['blockquote', 'code-block'],     //引用，代码块
          [{ 'header': 1 }, { 'header': 2 }],        // 标题，键值对的形式；1、2表示字体大小
          [{ 'list': 'ordered'}, { 'list': 'bullet' }],     //列表
          [{ 'script': 'sub'}, { 'script': 'super' }],   // 上下标
          [{ 'indent': '-1'}, { 'indent': '+1' }],     // 缩进
          [{ 'direction': 'rtl' }],             // 文本方向
          [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
          [{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题
          [{ 'color': [] }, { 'background': [] }],     // 字体颜色，字体背景颜色
          [{ 'font': [] }],     //字体
          [{ 'align': [] }],    //对齐方式
          ['clean'],    //清除字体样式
          // ['image','video']    //上传图片、上传视频
        ]
      }
    },
        title:"标题",
        content:"",
    }
    },
    methods: {
    addtext(){
        // this.content=this.$store.state.content;
        console.log(this.$store.state.content);
        console.log(this.title);
        this.$ajax.post("http://localhost:8080/system/yesapiOneArticles/set/createArticle",
        {
        title:this.title,
        content:this.$store.state.content,
        author:this.$store.state.username,
        }).then((response)=>{
          this.$store.state.articleid=response.data.id;
          console.log(response);
          this.tags.forEach(element => {
                              this.$ajax.post("http://localhost:8080/system/yesapiOneArticleTag/set/ArticleTag",{
                    articleId:this.$store.state.articleid,
                    tagId:element.id,
                  }).then((res)=>{
          console.log(res);
        })
          });
          });


          // this.$store.state.articleid=response.data.id;
        //   this.$ajax.post("http://localhost:8080/system/yesapiOneArticleTag/set/ArticleTag",{
        //     articleId:this.$store.state.articleid,
        //     tagId:this.checkboxGroup5
        // }).then((res)=>{
        //   console.log(res);
        // })
         
          
          // this.$ajax.post("http://localhost:8080/system/yesapiOneTags/test",JSON.stringify(this.dynamicTags)).then({
          //   function(res){
          //     console.log(res);
          //   }
          // })
          // console.log(this.tempForm);
    },
    createArticle(){
      this.$ajax.post("http://localhost:8080/system/yesapiOneArticles/set/createArticle",
        {
        title:this.title,
        content:this.$store.state.content,
        author:this.$store.state.username,
        }).then((response)=>{
          console.log(response);
          });
    },
    createTag(){
      
    },
    clearAll() { //全部清空数据
this.tags = []
this.tempForm.checkboxGroup5 = []
},
perChange(item) {
this.detailData.push(item)
},
handleClose(tag) { //标签的删除事件
// 去掉当前删除的tag
let yourChoseTags = this.tempForm.checkboxGroup5
this.tempForm.checkboxGroup5 = yourChoseTags.filter(item => {
if (tag.id !== item) {
return true
}
})
},
delRepeat(arr) { //数组对象去重
return Object.values(
arr.reduce((obj, next) => {
var key = JSON.stringify(next);
return (obj[key] = next), obj;
}, {}),
);
},
moreArr() {
let yourChose = this.tempForm.checkboxGroup5
let tempTags = []
tempTags = this.baseDataDetail(yourChose, this.checkBox, tempTags)
this.detailData = tempTags
},
baseDataDetail(yourChose, baseData, callBack) { //封装的数组方法
let temp = callBack
// 循环两个数据拿到选择的checkbox的id对应的初始数据
yourChose.forEach(item => {
baseData.forEach(itemSecond => {
if (item === itemSecond.id) {
temp.push(itemSecond)
}
})
})
return temp
}

},

watch: {
detailData() {
let tempArr = Object.assign([], this.detailData)
tempArr = this.delRepeat(tempArr)
// console.log(tempArr)
this.tags = tempArr
},
"tempForm.checkboxGroup5" () {
this.moreArr()
}

        },
    mounted() {
    // 富文本提示信息
    this.$nextTick(() => {
      const oToolBar = document.getElementsByClassName('ql-editor')[0]
      const   aButton = oToolBar.querySelectorAll('button');
      const  aSelect =  oToolBar.querySelectorAll('select');
      aButton.forEach(function(item){
        if(item.className === 'ql-script'){
          item.value === 'sub' ? item.title = '下标': item.title = '上标';
        }else if(item.className === 'ql-indent'){
          item.value === '+1' ? item.title ='向右缩进': item.title ='向左缩进';
        }else{
          item.title = titleConfig[item.classList[0]];
        }
      });
      aSelect.forEach(function(item){
        item.parentNode.title = titleConfig[item.classList[0]];
      });
    });
    this.$ajax.get("http://localhost:8080/system/yesapiOneTags/selectAllTags").then((Response=>{
      this.checkBox=Response.data
    }))
  },
	}
</script>

<style scoped>
.tijiao{
    margin: 10px;
}
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>